@charset "utf-8";
.center{
    .sell{
        background-image: url(../img/ba_02.jpg);
        width: 100%;
        height: 991px;
        p:first-of-type{
            font-size: 26px;
            color: white;
            padding-top: 184px;
            margin-left: 475px;         
        }
        p:nth-of-type(2){
            font-size: 30px;
            color: white;
            margin-top: 33px;
            margin-left: 866px;
        }
        a{
            margin-top: 70px;
            display: inline-block;
            color: white;
                            width: 170px;
                height: 56px;
                line-height: 56px;
            &:first-of-type{
                margin-left: 713px;
                border-radius: 5px;
                background: #1abc9c;
                text-align: center;
                vertical-align: middle;               
            }
            &:last-of-type{
                border-radius: 5px;
                text-align: center;
                vertical-align: middle; 
                background: #1abc9c;   
                margin-left: 18px;                  
            }
        }
        h6{
            font-size: 16px;
            color: #34495e;
            margin-top: 316px;
            margin-left: 156px;
        }
        .about{
            display: inline-block;
            width: 625px;
            margin-left: 156px;
            margin-top: 27px;
            font-size: 12px;
            color: #34495e;
            line-height: 28px;
            span{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical; 
            } 
        }
    }
    .what-we-do{
        background: #38373d;
        padding-bottom: 104px;
        h6:first-of-type{
            font-size: 26px;
            color: white;
            text-align: center;
            padding-top: 34px;
        }
        h6:last-of-type{
            font-size: 18px;
            color: white;
            text-align: center;
            margin-top: 9px;
        }
        .what-we-do_left{
            float: left;
            width: 180px;
            height: 238px;
            text-align: center;
            margin-left: 250px;
            margin-top: 40px;
            
        }
        .what-we-do_center{
            float: left;
            text-align: center;
            margin-left: 115px;
            margin-top: 40px;
            width: 180px;
            height: 238px;
        }
        .what-we-do_right{
            float: left;
            text-align: center;
            margin-left: 115px;
            margin-top: 40px;
            width: 180px;
            height: 238px;
        }
        .serve{
                width: 120px;
                height: 120px;
                border: 1px solid white ;
                border-radius: 100px;
                display: inline-block;
                line-height: 120px;
                transition: 0.5s;
                i{
                    font-size: 52px;
                    color: white;
                    vertical-align: middle;
                }
                &:hover{
                    background: white;
                    i{
                       color: #38373d; 
                    }
                }
            }
            h5{               
                font-size: 16px;
                margin-top: 27px;
                a{
                    color: white;
                }
            }
            p{
                color: white;
                font-size: 12px;
                margin-top: 32px;
            }
    }
    .new{
        width: 100%;
        padding-bottom: 98px;
        .new_top{
            border-bottom: 2px solid #e7e7e7;
            text-align: center;
            width: 661px;
            margin: 0 auto;
            h5{
                padding-top: 50px;
                font-size: 26px;
                color: #57616c;
                padding-bottom: 19px;
            }
        }
        .new_bottom{
            ul{
                text-align: center;
                width: 1224px;
                & li:nth-child(odd){
                    margin-left: 0;
                }
                li{
                    width: 390px;
                    height: 90px;
                    margin-left: 45px;
                    margin-top: 42px;
                    display: inline-block;
                    .hexagon{
                        float: left;
                        vertical-align: middle;
                    }
                    p{
                        float: right;
                        text-align: left;
                        font-size: 12px;
                        width: 280px;
                        vertical-align: middle;
                        line-height: 20px;
                        margin-top: 20px;
                        color: #5f5f61;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;   
                    }
                    span{
                        float: right;
                        font-size: 12px;
                        color: #5f5f61;
                    }
                }
            }  
        }
    }
    .product{
        background-image: url(../img/bgphoto__06.jpg);
        width: 100%;
        .product_top{
            width: 611px;
            margin: 0 auto;
            border-bottom: 2px solid #e7e7e7;
            h5{
                font-size: 24px;
                color: white;
                padding-top: 31px;
                padding-bottom: 15px;
                text-align: center;
            }
        }
        .product_middle{
            width: 100%;
            padding-bottom: 60px;
            position: relative;
            ul{
                margin-left: 148px;
                margin-top: 32px;
                li{
                    display: inline-block;
                    width: 245px;
//                  height: 246px; 
                    margin-right: 61px;
                    position: relative;
                    img{
                        width: 100%;
                        padding-bottom: 16px;
                    }
                    &.enlarge{
                        width: 370px;
                        height: 370px;
                        img{
                            padding-bottom:0px;
                        }
                    }
                }
                .mask{
                    width: 100%;
                    height: 246px;
                    position: absolute;
                    top: 0px;
                    left: 0;
                    background: rgba(0,0,0,.2);
                    &:hover{
                        background: rgba(0,0,0,0);
                    }
                }
            }
            .left{
                position: absolute;
                top: 145px;
                left: 0;
                i{
                    font-size: 70px;
                    color: white;
                    margin-left: 78px;
                }
            } 
            .right{
                position: absolute;
                top: 145px;
                left: 1140px;
                i{
                    font-size: 70px;
                    color: white;
                }
            }  
        }
//          .left{
//              float: left;
//              padding-top: 182px;
//              i{
//                  font-size: 70px;
//                  color: white;
//                  
//                  margin-left: 78px;
//              }
//          }
//          .photo1{
//              float: left;
//              padding-top: 141px;
//              margin-right: 60px;
//              width: 245px;
//              height: 246px;
//              position: relative;
//              img{
//                  width: 100%;
//                  overflow: hidden;
//              }
//              .mask{
//                  width: 100%;
//                  height: 100%;
//                  background: red;
//                  position: absolute;
//                  top: 142;
//                  left: 0;
//                  background: rgba(0,0,0,.2);
//                  &:hover{
//                      background: rgba(0,0,0,0);
//                  }
//              }
//          }
//          .photo2{
//              float: left;
//              padding-top: 32px;
//              margin-right: 60px;
//              width: 370px;
//              height: 370px;
//              img{
//                  width: 100%;
//                  overflow: hidden;
//              }
//          }
//          .photo3{
//              float: left;
//              padding-top: 141px;
//              width: 245px;
//              height: 246px;
//              position: relative;
//              img{
//                  width: 100%;
//                  overflow: hidden;
//              }   
//              .mask{
//                  width: 100%;
//                  height: 100%;
//                  background: red;
//                  position: absolute;
//                  top: 142;
//                  left: 0;
//                  background: rgba(0,0,0,.2);
//                  &:hover{
//                      background: rgba(0,0,0,0);
//                  }
//              } 
//          }
//          .right{
//              float: left;
//              padding-top: 182px;
//              i{
//                  font-size: 70px;
//                  color: white;
//              }
//          }
//      }
        .product_bottom{
            width: 100%;
            height: 84px;
            background: #ebecec;
        }
    }
}
